<template>
  <div class="intergration-wrapper">
    <centerHeader/>
    <div class="centerCate-wrap">
      <div class="info-box">
        <div class="title_box">
          <span class="title-01">我的门店</span>
          <i class="el-icon-arrow-down"></i>
        </div>

        <div class="password_box">
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="请输入密码">
              <el-input type="password" v-model="formLabelAlign.old_password" clearable></el-input>
            </el-form-item>
            <el-form-item label="请设置新的登录密码">
              <el-input type="password" v-model="formLabelAlign.new_password" clearable></el-input>
            </el-form-item>
            <el-form-item label="重复密码">
              <el-input type="password" v-model="formLabelAlign.confirm_password" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="submit-box">
          <button class="submit-btn" @click="submit">保存</button>
          <div class="submit_text clearfix">
            <a class="fr" href>忘记密码</a>
          </div>
        </div>
      </div>
    </div>
    <centerFooter/>
  </div>
</template>

<script type="text/ecmascript-6">
import centerHeader from "@/views/center/components/centerHeader";
import centerFooter from "@/views/center/components/centerFooter";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";

export default {
  name: "password",
  data() {
    return {
      isBuy: true,
      user_info: {},
      sex: 0,
      labelPosition: "top",
      formLabelAlign: {
        new_password: "",
        old_password: "",
        confirm_password: ""
      }
    };
  },
  components: {
    centerHeader,
    centerFooter
  },
  methods: {
    userinfo() {
      http.get(this, {
        url: "ucenter/user_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("用户信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;
            this.sex = this.user_info.sex;
          } else {
          }
        }
      });
    },
    storeinfo() {
      http.get(this, {
        url: "store/store_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("门店信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;
            this.user_type = "store";
            // this.total_commission = data.info.total_commission;
            // this.store_count = data.info.store_count;
            localStorage.setItem("user_name", data.info.store_name);
            //localStorage.setItem("user_head", data.info.headimgurl);
            localStorage.setItem("user_type", "store");
          } else {
          }
        }
      });
    },
    submit() {
      let user_type = localStorage.getItem("user_type");
      if (user_type == 0) {
        http.post(this, {
          url: "ucenter/security",
          data: {
            token: localStorage.getItem("user_token"),
            ...this.formLabelAlign
          },
          dataType: "json",
          success: function(data) {
            console.log("保存用户信息:", data);
            if (data.status == 1) {
              this.$message.success("重置密码成功");
            } else {
              this.$message.success(data.info);
            }
          }
        });
      } else if (user_type == "store") {
        http.post(this, {
          url: "ucenter/security",
          data: {
            token: localStorage.getItem("user_token"),
            ...this.formLabelAlign
          },
          dataType: "json",
          success: function(data) {
            console.log("保存用户信息:", data);
            if (data.status == 1) {
              this.$message.success("重置密码成功");
            } else {
              this.$message.success(data.info);
            }
          }
        });
      }
    }
  },
  created() {},
  activated() {
    this.user_type = localStorage.getItem("user_type");
    if (this.user_type == "store") {
      this.storeinfo();
    } else {
      this.userinfo();
    }
  }
};
</script>

<style scoped lang="scss">
.intergration-wrapper {
}

.centerCate-wrap {
  width: 100%;

  .info-box {
    @extend .cmm-clearfix;
    $letHeight: 1rem;
    min-height: $letHeight;

    .box-l {
      float: left;
      width: 6rem;
      position: relative;
      min-height: $letHeight;
      margin-left: 0.2rem;
    }

    .box-r {
      float: right;
      position: relative;
      width: 1rem;
      height: $letHeight;

      .icon-02 {
        float: right;
        font-size: 0.6rem;
        @extend .cmm-translateXY;
      }
    }
  }

  ul {
    width: 100%;
    $letHeight: 0.5rem;

    li {
      line-height: $letHeight;

      p {
        color: $c-mainC;
        @extend .cmm-clearfix;
        height: $letHeight;

        * {
          line-height: $letHeight;
          display: inline-block;
          vertical-align: middle;
        }

        a {
          width: 100%;
        }

        .icon-02 {
          float: right;
          font-size: 0.6rem;
        }

        .title-01 {
          font-size: 0.32rem;
          float: left;
          color: $c-mainC;
          font-weight: 500;
        }

        .title-03 {
          font-size: 0.22rem;
          float: left;
          color: $c-mainC;
        }
      }
    }
  }
}

.icon-03 {
  font-size: 0.7rem;
  line-height: 0.8rem;
  vertical-align: middle;
  font-weight: 100;
  width: 0.5rem;
  display: inline-block;
}

.submit-box {
  padding: 0 0.66rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.title_box {
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.36rem;
  text-align: center;
}
.password_box {
  border-top: 0.15rem solid #eeeeee;
  padding-left: 1rem;
  padding-right: 1rem;
  & > form {
    margin: 0.25rem 0;
    /deep/.el-form-item__label {
      font-size: 0.36rem;
    }
    /deep/.el-input__inner {
      border: none;
      border-bottom: 0.013333rem solid #dcdfe6;
    }
    .el-form-item {
      margin-bottom: 0.2rem;
    }
  }
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.submit_text {
  padding: 0 0.15rem;
  .text_color {
    color: #3c9bef;
  }
}
</style>
